<template>
  <!-- 隔离人员汇总 -->
  <view class="person">
    <!-- 图表 -->
    <view v-if="info && !showEmpty" class="chart">
      <text>人数（人）</text>
      <qiun-data-charts :opts="config" type="column" :chartData="chartData" :errorShow="false" :canvas2d="true" background="none" :tooltipShow="false" :tapLegend="false" />
    </view>
    <!-- 汇总 -->
    <view v-if="info && !showEmpty" class="card collect">
      <view class="hd">
        <text class="grey block">密接人员</text>
        <text>{{ info.intimateNo }}</text>
      </view>
      <view class="hd">
        <text class="grey block">次密接人员</text>
        <text>{{ info.subIntimateNo }}</text>
      </view>
      <view class="hd">
        <text class="grey block">入境隔离人员</text>
        <text>{{ info.inboundNo }}</text>
      </view>
      <view class="hd">
        <text class="grey block">大数据排查</text>
        <text>{{ info.total }}</text>
      </view>
    </view>
    <view v-if="info && !showEmpty" class="list">
      <uni-table emptyText="暂无更多数据">
        <!-- 表头行 -->
        <uni-tr>
          <uni-th width="25" align="left">时间</uni-th>
          <uni-th width="25" align="left">新增密接</uni-th>
          <uni-th width="25" align="left">新增次密</uni-th>
          <uni-th width="25" align="left">新增入境</uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr v-for="(item, index) in info.dateDetails" :key="index">
          <uni-td>{{ item.date }}</uni-td>
            <uni-td>{{ item.intimateNo }}</uni-td>
              <uni-td>{{ item.subIntimateNo }}</uni-td>
                <uni-td>{{ item.inboundNo }}</uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <v-empty :isShow="showEmpty" text="暂无相关记录"></v-empty>
  </view>
</template>
<script>
  import Config from '@/components/v-chart/column';
  import VEmpty from '@/components/v-empty/index.vue';
  import Api from '@/api/main';
  import { merge, get } from 'lodash'

  export default {
    components: {
      VEmpty
    },
    data() {
      return {
        showEmpty: false,
        config: merge(Config, {
          yAxis: {
            data: [
            {
              title: '人数'
            }]
          }
        }),
        info: {
          // // 密切接触人员数量
          // intimateNo: 200,
          // // 次密切接触人员数量
          // subIntimateNo: 900,
          // // 入境隔离数量
          // inboundNo: 200,
          // // 大数据排查数量
          // total: 200,
          // // 每日隔离人员详细
          // dateDetails: [
          // {
          //   // 日期
          //   date: '2021-09-24',
          //   // 新增密接
          //   intimateNo: 200,
          //   // 新增次密
          //   subIntimateNo: 200,
          //   // 新增入境
          //   inboundNo: 200
          // }],
          // // 隔离点人员详细
          // addressDetails: [
          // {
          //   // 隔离点
          //   address: '地点1',
          //   // 隔离人数
          //   quarantineNo: 200,
          //   // 转运人数
          //   transferNo: 10,
          //   // 解除人数
          //   relieveNo: 50
          // },
          // {
          //   // 隔离点
          //   address: '地点2',
          //   // 隔离人数
          //   quarantineNo: 200,
          //   // 转运人数
          //   transferNo: 10,
          //   // 解除人数
          //   relieveNo: 50
          // }]
        }
      };
    },
    computed: {
      chartData() {
        return {
          categories: this.info.addressDetails.map(a => a.address),
          series: [
          {
            name: '隔离人数',
            data: this.info.addressDetails.map(a => a.quarantineNo)
          },
          {
            name: '转运人数',
            data: this.info.addressDetails.map(a => a.transferNo)
          },
          {
            name: '解除人数',
            data: this.info.addressDetails.map(a => a.relieveNo)
          }]
        };
      }
    },
    methods: {
      async getData() {
        uni.showLoading({
          title: '加载中...'
        });
        const res = await this.$http.post(Api.getQuarantineStatistics);
        this.info = res;
        this.showEmpty = !res;
        uni.hideLoading();
      }
    },
    created() {
      this.getData();
    }
  };
</script>
<style lang="scss">
  .person {
    width: 100%;
    padding: 20rpx 40rpx;

    .chart {
      width: calc(100% - 100rpx);
      margin: 0 auto;
    }

    .collect {
      margin-top: 40rpx;
      padding: 40rpx 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 2;

      .hd {
        text-align: center;
      }

      .grey {
        color: $uni-sub-text-color;
      }
    }
  }
</style>